OnInit

ngOnInit

使用ngOnInit的二個主要理由

• 執行比較複雜的初始化(而非在constructor做此類的初始化)

  • constructor最好只用來設定簡單的初始化資料

  • 當資料是存取遠端API而來時，最好不要在constructor中做fetch

• 在Angular設定完@Input屬性之後，在此設定Component

  • 如果必須使用元件的@Input屬性來初始化元件，要在ngOnInit的方法中設定

  • 因為ng會在constructor之後，ngOnInit之前設定@Input屬性

ngOnChanges會是第一個可以取用@Input屬性的地方，因為ng會在ngOnInit之前先呼叫一次ngOnChanges，ngOnInit之會被呼叫一次後，之後就是不斷的呼叫ngOnChanges

OnDestroy

ngOnDestroy

這邊的程式碼邏輯會在ng銷毀元件前執行。

• 這是一個可以通知應用程式其他元件，此元件要消失的時機點

• 可以釋放一些不會自動被gc的資源，而你會忽略去做而造成的memory leak

  • 取消訂閱Observables及DOM Event Listener

  • 停止Interval timer

  • 取消註冊在全域服務的所有callback

OnChanges

ngOnChanges

ng會在偵測到元件的@Input屬性有變動時，呼叫ngOnChanges

ngOnChanges會在每次變更時，傳入一個SimpleChange的物件，用來保存現在與之前的屬性值。

這個hook會一直不斷的重複執行，直到元件被銷毀

以下是ngOnchanges傳入一個SimpleChange的物件的範例

ngOnChanges(changes: SimpleChanges) {
  for (let propertyName in changes) {
    let change = changes[propertyName];
    let cur  = JSON.stringify(change.currentValue);
    let prev = JSON.stringify(change.previousValue);
    this.changeLog.push(`${propertyName}: currentValue = ${cur}, previousValue = ${prev}`);
  }
}

DoCheck

ngDoCheck

與ngOnChanges不同的是，

這個hook是用來檢測元件「所有的變化」，無論是否發生實質的改變都會觸發

(ngOnChanges則是只有綁定的@Input屬性發生變化時才會觸發)

我們在使用這個方法的時候要非常的小心，因為他會很频繁的被呼叫

最好是做比較輕量級的操作，以免影響使用者體驗。